<style rel="stylesheet/scss" lang="scss" scoped>
    .el-merchant-box {
        width: 100%;
        height: 825px;
        padding: 20px;
		overflow: auto;
        box-sizing: border-box;
        .box-flex {
            display: flex;
            margin-bottom: 10px;
        }
        .w-span {
            min-width: 100px;
            line-height: 40px;
            display: inline-block;
        }
		.l-radio{
			line-height: 40px;;
		}
		.pri-btn{
			margin: 0 auto;
		}
    }
</style>
<template>
    <div class="el-merchant-box">
        <el-row class=" box-flex">
            <el-col :span="7" class="box-flex m-l-10">
                <span class="w-span">商家编号*</span>
                <el-input 
                	placeholder="3位字母加3位数字" 
                	clearable  
                	v-model="merchant.number" 
                	maxLength="6" ></el-input>
            </el-col>
        </el-row>
		<el-row class=" box-flex">
			<el-col :span="7" class="box-flex m-l-10">
				<span class="w-span">开户账号*</span>
				<el-input 
					placeholder="请输入内容" 
					clearable 
					v-model="merchant.account" 
					maxLength="11" 
					type="number"
					oninput="if(value.length>11)value=value.slice(0,11)"
					
					>
				</el-input>
			</el-col>
		</el-row>
		<el-row class=" box-flex">
			<el-col :span="7" class="box-flex m-l-10">
				<span class="w-span">商家类型*</span>
				<el-radio label="1" class="l-radio" v-model="merchant.type">公司</el-radio>
				<el-radio  label="2" class="l-radio" v-model="merchant.type">个人</el-radio>
			</el-col>
		</el-row>
		<el-row class=" box-flex">
			<el-col :span="7" class="box-flex m-l-10">
				<span class="w-span">商家名称*</span>
				<el-input placeholder="请输入内容" clearable v-model="merchant.merchantName" maxLength="40"></el-input>
			</el-col>
		</el-row>
		<el-row class=" box-flex">
			<el-col :span="7" class="box-flex m-l-10">
				<span class="w-span">商家电话*</span>
				<el-input 
					placeholder="请输入内容" 
					clearable 
					oninput="if(value.length>11)value=value.slice(0,11)"
					v-model="merchant.cellPhoneNumber" 
					type="number" 
					maxLength="11">
				</el-input>
			</el-col>
		</el-row>
		<el-row class=" box-flex">
			<el-col :span="7" class="box-flex m-l-10">
				<span class="w-span">商家地址*</span>
				<el-input placeholder="请输入内容" v-model="merchant.address" maxLength="200" clearable></el-input>
			</el-col>
		</el-row>
		<el-row class=" box-flex">
			<el-col :span="7" class="box-flex m-l-10">
				<span class="w-span">联系人姓名*</span>
				<el-input placeholder="请输入内容" clearable maxLength="10" v-model="merchant.contactor"></el-input>
			</el-col>
		</el-row>
		<el-row class=" box-flex">
			<el-col :span="7" class="box-flex m-l-10">
				<span class="w-span">联系人手机*</span>
				<el-input 
					placeholder="请输入内容" 
					clearable 
					type="number" 
					oninput="if(value.length>11)value=value.slice(0,11)"
					v-model="merchant.contactorPhoneNumber" 
					maxLength="11"></el-input>
			</el-col>
		</el-row>
		<el-row class=" box-flex">
			<el-col :span="7" class="box-flex m-l-10">
				<span class="w-span">合同编号</span>
				<el-input placeholder="请输入内容" clearable maxLength="50" v-model="merchant.contractCode"></el-input>
			</el-col>
		</el-row>
		<el-row class="box-flex">
			<el-col :span="7" class="box-flex m-l-10">
				<span class="w-span">备注</span>
				<el-input placeholder="请输入内容" clearable maxLength="100" v-model="merchant.remark"></el-input>
			</el-col>
		</el-row>
		<!--<el-row class="box-flex">
			<el-button type="primary" class="pri-btn" @click="submitMerchant">保存</el-button>
			
		</el-row>-->
		<span v-if="c_valid" style="opacity: 0;">4545</span>
    </div>
</template>
<script>
	export default {
		props: {
			merchantInfo: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				merchant: {
					// 商家code
					number: '',
					// 开户账号
					account: '',
					// 商家类型
					type: '1',
					// 商家名称
					merchantName: '',
					// 家名称一致
					companyName: '',
					// 商家电话
					cellPhoneNumber : '',
					// 商家地址
					address: '',
					// 联系人姓名
					contactor: '',
					// 联系人手机
					contactorPhoneNumber: '',
					// 合同编号
					contractCode: '',
					// 备注
					remark: '',
					filterData: false,
				}
			}
		},
		created() {
			console.log(this.merchantInfo)
			if(this.merchantInfo && this.merchantInfo.number) {
				this.merchant.number = this.merchantInfo.number
				this.merchant.account = this.merchantInfo.account
				this.merchant.type = ''+ this.merchantInfo.type
				this.merchant.merchantName = this.merchantInfo.merchantName
				this.merchant.companyName = this.merchantInfo.companyName
				this.merchant.cellPhoneNumber  = this.merchantInfo.cellPhoneNumber 
				this.merchant.address = this.merchantInfo.address
				this.merchant.contactor = this.merchantInfo.contactor
				this.merchant.contactorPhoneNumber = this.merchantInfo.contactorPhoneNumber
				this.merchant.contractCode = this.merchantInfo.contractCode
				this.merchant.remark = this.merchantInfo.remark
			}
		},
		methods: {

			submitMerchant() {
				//this.$emit('submitMerchant',this.merchant)
				let rex=/^[A-Za-z]{3}\d{3}$/
				let attr = ''
				attr = !this.merchant.number ? '请填写商家编号' : !this.merchant.account ? '请填写开户账号' : this.merchant.account.length < 11 ? '请填写11位账号': !this.merchant.type ? '请选择商家类型':
				!this.merchant.merchantName ? '请填写商家名称':
				!this.merchant.cellPhoneNumber  ? '请填写商家电话' : this.merchant.cellPhoneNumber .length < 11 ? '请填写11位商家电话': !this.merchant.address ? '请填写地址': !this.merchant.contactor ? '请填写联系人姓名':
				!this.merchant.contactorPhoneNumber? '请填写联系人手机号': this.merchant.contactorPhoneNumber.length < 11 ? '请填写11位联系人手机号': ''
				if(this.merchant.number.match(rex) == null) {
					attr = '商家编码应为3位字母加3位数字'
				}
				if(attr) {
					this.$message({
						message: attr,
						type: 'warning'
					})
					return
				}
				this.$emit('submitMerchant',this.merchant)
			}
		},
		computed: {
			c_valid() {
				console.log(this.merchant.number)
				if(this.merchant.number && this.merchant.account && this.merchant.account.length == 11 && this.merchant.type && this.merchant.merchantName
					&& this.merchant.cellPhoneNumber  && this.merchant.cellPhoneNumber.length == 11 ) {
					this.$emit('setMerchantService', false)
				}
				if(!this.merchant.number || !this.merchant.account || !this.merchant.type || !this.merchant.merchantName || !this.merchant.cellPhoneNumber  || !this.merchant.address || !this.merchant.contactorPhoneNumber) {
					this.$emit('setMerchantService', true)
				}
				
			}
		}
		
		
		
	}
</script>
